Align category labels vertically

Add a box to contain the MenuItem labels and align them vertically.

Clean up the style in the MenuItem code.

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index ded639bd2bfa51a0bcf43330723a1b8806033c81..25237693c9bcbf4bb252fb2f799aa1044fd3f504 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -131,24 +131,29 @@ MenuItem.prototype = {
         }
         if (pixbuf != null)
             Shell.clutter_texture_set_from_pixbuf(this._icon, pixbuf);
-        this.actor.append(this._icon, 0);
+        this.actor.append(this._icon, Big.BoxPackFlags.NONE);
         this._text = new Clutter.Text({ color: GenericDisplay.ITEM_DISPLAY_NAME_COLOR,
                                         font_name: "Sans 14px",
                                         ellipsize: Pango.EllipsizeMode.END,
                                         text: name });
-        this.actor.append(this._text, Big.BoxPackFlags.EXPAND);
 
-        let box = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
-                                y_align: Big.BoxAlignment.CENTER
-                              });
+        // We use individual boxes for the label and the arrow to ensure that they
+        // are aligned vertically. Just setting y_align: Big.BoxAlignment.CENTER
+        // on this.actor does not seem to achieve that.  
+        let labelBox = new Big.Box({ y_align: Big.BoxAlignment.CENTER });
 
-        this._arrow = new Shell.Arrow({ surface_width: MENU_ICON_SIZE/2,
-                                        surface_height: MENU_ICON_SIZE/2,
+        labelBox.append(this._text, Big.BoxPackFlags.NONE);
+       
+        this.actor.append(labelBox, Big.BoxPackFlags.EXPAND);
+
+        let arrowBox = new Big.Box({ y_align: Big.BoxAlignment.CENTER });
+
+        this._arrow = new Shell.Arrow({ surface_width: MENU_ICON_SIZE / 2,
+                                        surface_height: MENU_ICON_SIZE / 2,
                                         direction: Gtk.ArrowType.RIGHT,
-                                        opacity: 0
-                                      });
-        box.append(this._arrow, 0);
-        this.actor.append(box, 0);
+                                        opacity: 0 });
+        arrowBox.append(this._arrow, Big.BoxPackFlags.NONE);
+        this.actor.append(arrowBox, Big.BoxPackFlags.NONE);
     },
 
     getState: function() {